import { BasePage } from '@common/components/base-page'
import NavigationBar from '@components/navBar'
import Taro from '@tarojs/taro'
import Jump from '@utils/jump'
import AppRoute from '@utils/route/index'
import { View, Text, Image, Input, Button, ScrollView } from '@tarojs/components'
import { AtTabs } from "taro-ui"
import PickerAddress from '@components/picker-address'
import userAvatar from '../../../assets/img/avatar1.png'
import link from '../../../assets/img/link.png'
import IQRequest from '@common/iq-request/request'
import camera from '../../../assets/img/camera.png'
import "taro-ui/dist/style/components/tabs.scss";
import style from './index.module.scss'

interface IProps {
    tabList: any
    tabPlatform?: boolean
}
interface IState {
    current: number,
    currentIdentity: number
    clickedSelectPanel: boolean,

    // tabList: any
}
export default class EditUser extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            current: 0,
            currentIdentity: 0,
            clickedSelectPanel: false,
        }
    }
    componentDidShow() {
    }
    handleClick = (e) => {
        this.setState({
            current: e,
        })
        console.log(e, '点击了tab页')
    }
    handleIdentityClick = (e) => {
        this.setState({
            currentIdentity: e,
        })
    }
    closeMediaChange = (plat) => {
        console.log(plat, '选择的地区')
        this.setState({
            // selectedPlat: plat.title,
            clickedSelectPanel: false
        })
    }
    handleAddress = async () => {
        this.setState({
            clickedSelectPanel: true
        })
        console.log('选择所在地区')
    }
    handleLogOut = () => {
        IQRequest.VIVORequest('/api/v1/logout', '').then((response: any) => {
            console.log(response, '退出')
            Taro.removeStorageSync('Authorization')
            Taro.showModal({
                title: '温馨提示',
                content: '确定要退出登录吗',
                // confirmText: '确定',
                success(ress) {
                    if (ress.confirm) {
                        Jump.jump({
                            url: AppRoute.APP.INDEX,
                            type: 'reLaunch'
                        })
                    }
                }
            })
        })
    }

    render() {

        const sex = [{ title: '男', key: 1 }, { title: '女', key: 2 }]
        return (
            <>
                <ScrollView style={{ height: "100vh" }} enhanced={true} scrollY={true}>
                    <NavigationBar backPageShow={true} titleColor="black" barBackgroundColor='white' title="编辑个人信息"></NavigationBar>
                    <View className={style.userCon}>
                        <View className={style.baseInfo}>
                            <View className={style.imgBox}>
                                <Image className={style.userAvatar} src={userAvatar}></Image>
                                <Image className={style.camera} src={camera} ></Image>
                            </View>
                            <View className={style.imgBox}>
                                <View className={style.labels}>
                                    <Text>vivo</Text>
                                    <Text>V粉</Text>
                                </View>
                            </View>
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>昵称</Text>
                                </View>
                                <Input type="text" className={style.input} placeholder='请输入昵称' placeholderClass={style.place}></Input>
                            </View>
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>姓名</Text>
                                </View>
                                <Input type="text" className={style.input} placeholder='请输入姓名' placeholderClass={style.place}></Input>
                            </View>
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>性别</Text>
                                </View>
                                <View className={style.tabs}>
                                    {
                                        sex.map(item => {
                                            return (
                                                <View className={this.state.currentIdentity === item.key ? style.viewActive : ''} onClick={this.handleIdentityClick.bind(this, item.key)} key={item.key}>{item.title}</View>
                                            )
                                        })
                                    }
                                </View>
                            </View>
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>生日</Text>
                                </View>
                                <Input type="text" className={style.input} placeholder='请选择生日' placeholderClass={style.place}></Input>
                            </View>
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>常驻位置</Text>
                                </View>
                                <Input onClick={this.handleAddress} type="text" className={style.input} placeholder='省市区县、乡镇等' placeholderClass={style.place}></Input>
                            </View>
                        </View>
                        <View className={style.addMediaBtn}>
                            <View onClick={this.handleLogOut}>
                                <Text style="color:#FB3333">退出登录</Text>
                            </View>
                        </View>
                    </View>
                    <View className={style.footer}>
                        <View className={style.btn}>
                            <Button>保存</Button>
                        </View>
                    </View>
                    <PickerAddress level={2} selectMedia={this.state.clickedSelectPanel} title="常驻位置" close={this.closeMediaChange} />
                </ScrollView>
            </>
        )
    }
}